<!-- 广告管理 -->
<template>
  <div>
    <edu-dialog
      :title.sync="dialogConfig2.title"
      :visible.sync="dialogConfig2.showDialog"
      @close="dialogConfig2.showDialog = false"
      width="70%"
      height="650px"
    >
      <el-row class="cardMiniBar">
        <el-col :span="24">
          <div class="fr">
            <el-button type="primary" @click="add" size="small"
              >添加广告</el-button
            >
          </div>
        </el-col>
      </el-row>

      <div class="cardBody">
        <edu-table
          ref="advsTable"
          :data="tableList"
          :order="true"
          :selection="true"
          :pagination="false"
        >
          <el-table-column label="标题" prop="title" />
          <el-table-column label="链接" prop="forwordLinkName" />
          <!-- <el-table-column label="是否推荐" prop="recommend">
            <template slot-scope="scope">
              {{ renderOption(scope.row.recommend, "recommend") }}
            </template>
          </el-table-column>
          <el-table-column label="发布状态" prop="publishStatus">
            <template slot-scope="scope">
              {{ renderOption(scope.row.pushStatus, "publishStatus") }}
            </template>
          </el-table-column> -->
          <el-table-column label="开始时间" prop="beginTime" width="220" >
            <template slot-scope="scope">
              {{ scope.row.beginTime ?scope.row.beginTime : "长期" }}
            </template>
          </el-table-column>
          <el-table-column label="结束时间" prop="endTime" width="220" >
            <template slot-scope="scope">
              {{ scope.row.endTime ?scope.row.endTime : "长期" }}
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="220px">
            <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)" size="small">
                编辑
              </el-button>
              <el-button
                type="text"
                @click="handlerDelete(scope.row)"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </edu-table>
      </div>
      <span slot="buttons"> </span>
    </edu-dialog>

    <edu-dialog
      :title.sync="dialogConfig.title"
      :visible.sync="dialogConfig.showDialog"
      @close="closeDialog(dialogConfig)"
      width="70%"
    >
      <el-form
        ref="dialogForm"
        :model="dialogConfig.formData"
        :rules="dialogConfig.action === 'view' ? {} : dialogConfig.rules"
        label-width="120px"
        size="small"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input v-model="dialogConfig.formData.title" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="跳转方式" prop="forwordWay">
              <DictSelect
                v-model="dialogConfig.formData.forwordWay"
                :defaultOptions="options.forwordWay"
                placeholder="请选择"
                style="width: 100%"
                @change="changeF"
              />
            </el-form-item>
          </el-col>
          <template v-if="dialogConfig.formData.forwordWay === 1">
            <el-col :span="8">
              <el-form-item label="跳转类型" prop="forwordType">
                <DictSelect
                  v-model="dialogConfig.formData.forwordType"
                  :defaultOptions="options.forwordType"
                  placeholder="请选择"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="8">
            <el-form-item label="跳转链接" prop="forwordLink">
              <!-- 农产品 -->
              <SelectAgricultureProducts
                v-if="
                  dialogConfig.formData.forwordWay === 1 &&
                  dialogConfig.formData.forwordType === 1
                "
                ref="SelectAgricultureProducts"
                v-model="dialogConfig.formData.forwordLink"
                v-bind:valueText="dialogConfig.formData.forwordLinkName"
              ></SelectAgricultureProducts>

              <!-- 农事服务 -->
              <SelectService
                v-else-if="
                  dialogConfig.formData.forwordWay === 1 &&
                  dialogConfig.formData.forwordType === 2
                "
                ref="SelectService"
                v-model="dialogConfig.formData.forwordLink"
                v-bind:valueText="dialogConfig.formData.forwordLinkName"
              ></SelectService>

              <!-- 内容管理 -->
              <SelectKnowledge
                v-else-if="
                  dialogConfig.formData.forwordWay === 1 &&
                  dialogConfig.formData.forwordType === 3
                "
                ref="SelectKnowledge"
                v-model="dialogConfig.formData.forwordLink"
                v-bind:valueText="dialogConfig.formData.forwordLinkName"
              ></SelectKnowledge>

              <!-- APP -->
              <DictSelect
                v-else-if="
                  dialogConfig.formData.forwordWay === 1 &&
                  dialogConfig.formData.forwordType === 4
                "
                v-model="dialogConfig.formData.forwordLink"
                :defaultOptions="options.forwordLink"
                clearable
              />

              <!-- 专题选择 -->
              <SelectThematicManagement
                v-else-if="
                  dialogConfig.formData.forwordWay === 1 &&
                  dialogConfig.formData.forwordType === 5
                "
                ref="SelectThematicManagement"
                v-model="dialogConfig.formData.forwordLink"
                v-bind:valueText="dialogConfig.formData.forwordLinkName"
              ></SelectThematicManagement>

              <!-- 其他 -->
              <el-input
                v-else
                v-model="dialogConfig.formData.forwordLink"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="有效时间">
              <el-date-picker
                v-model="dialogConfig.formData.time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%; height: 33px"
                @change="
                  (date) =>
                    timeChange(date, dialogConfig.formData, [
                      'beginTime',
                      'endTime',
                    ])
                "
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="sort">
              <el-input-number
                v-model="dialogConfig.formData.sort"
                :min="0"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图片" prop="image">
              <Upload v-model="dialogConfig.formData.image" ref="uploadComp">
                <div class="el-upload__tip" slot="tip">
                  尺寸：{{ dialogConfig2.data.width }}*{{
                    dialogConfig2.data.height
                  }}(像素)，大小不超过5M
                </div>
              </Upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="buttons" v-if="dialogConfig.action !== 'view'">
        <template>
          <el-button @click="closeDialog(dialogConfig)"> 取消 </el-button>
          <el-button type="primary" @click="handlerSubmit"> 提交 </el-button>
        </template>
      </span>
      <span slot="buttons" v-else>
        <template>
          <el-button @click="closeDialog(dialogConfig)">返回</el-button>
        </template>
      </span>
    </edu-dialog>
  </div>
</template>

<script>
import utils from "@/utils";
import mixins from "@/mixins";

import {
  queryAdPropertyList,
  addAdProperty,
  updateAdProperty,
  deleteAdProperty,
} from "@/api/advertisement";
import { queryAllPageTree } from "@/api/common";

const formData = {
  title: "",
  forwordWay: "",
  forwordType: "",
  forwordLink: "",
  time: [],
  sort: 1,
  image: "",
};
export default {
  mixins: [mixins],
  data() {
    return {
      queryParams: {
        condition: {},
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableList: [],
      dialogConfig2: {
        title: "广告管理",
        showDialog: false,
        data: {},
      },
      dialogConfig: {
        title: "",
        showDialog: false,
        action: "add",
        formData: {},
        rules: {
          title: [
            {
              required: true,
              message: "此项必填！",
              trigger: "blur",
            },
          ],
          forwordWay: [
            {
              required: true,
              message: "此项必填！",
              trigger: "blur",
            },
          ],
          forwordLink: [
            {
              required: true,
              message: "此项必填！",
              trigger: "change",
            },
          ],
          image: [
            {
              required: true,
              message: "此项必填！",
              trigger: "blur",
            },
          ],
        },
        fileList: [],
      },
      options: {
        forwordLink: [
          {
            name: "课程专家",
            code: "1",
          },
          {
            name: "农科讲堂",
            code: "2",
          },
          {
            name: "漠阳味道",
            code: "3",
          },
          {
            name: "农户求助",
            code: "4",
          },
          {
            name: "农事服务",
            code: "5",
          },
          {
            name: "信贷服务",
            code: "6",
          },
          {
            name: "补贴政策",
            code: "7",
          },
          {
            name: "美丽阳江",
            code: "8",
          },
        ],
      },
      api: {
        queryAllPageTree,
      },
      time:"长期"
    };
  },
  created() {
    this.initOptions();
  },
  methods: {
    open(data) {
      if(data){
        this.dialogConfig2.data = data;
        this.dialogConfig2.showDialog = true;
      }

      this.query();
    },
    async initOptions() {},
    // 查询
    async query() {
      let { returnObj } = await queryAdPropertyList(this.dialogConfig2.data.id);
      this.tableList = returnObj;
    },
    closeDialog(dialog) {
      dialog.showDialog = false;
      this.$refs["dialogForm"].resetFields();
    },
    openDialog(dialog) {
      dialog.showDialog = true;
    },
    // 新增
    add() {
      this.dialogConfig.title = "新增";
      this.dialogConfig.action = "add";
      this.dialogConfig.formData = utils.clone(formData);

      this.openDialog(this.dialogConfig);
      this.$nextTick(() => {
        this.$refs.uploadComp.init();
      });
    },
    // 修改
    async edit(row) {
      this.dialogConfig.title = "编辑";
      this.dialogConfig.action = "edit";

      if (row.beginTime && row.endTime) {
        row.time = [row.beginTime, row.endTime];
      } else {
        row.time = [];
      }
      this.dialogConfig.formData = utils.clone(row);

      this.openDialog(this.dialogConfig);
      this.$nextTick(() => {
        this.$refs.uploadComp.init();
      });
    },
    // 保存提交
    handlerSubmit() {
      let params = {
        ...this.dialogConfig.formData,
        adAreaId: this.dialogConfig2.data.id,
      };
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          if (this.dialogConfig.action == "add") {
            addAdProperty(params).then((res) => {
              this.$message({
                type: "success",
                message: "成功",
              });
              this.closeDialog(this.dialogConfig);
              this.query();
            });
          } else {
            updateAdProperty(params).then((res) => {
              this.$message({
                type: "success",
                message: "成功",
              });
              this.closeDialog(this.dialogConfig);
              this.query();
            });
          }
        }
      });
    },
    // 查看
    view() {
      this.dialogConfig.title = "查看";
      this.dialogConfig.action = "view";
      this.openDialog(this.dialogConfig);
    },
    // 删除
    async handlerDelete(row) {
      let idField = "id";
      if (row && row[idField]) {
        this.batchDelete(deleteAdProperty, idField, [row[idField]]);
      } else {
        this.batchDelete(deleteAdProperty, idField);
      }
    },
    changeF(val){
      if(val){
        this.dialogConfig.formData.forwordLink = null
      }
    }

  },
};
</script>

<style lang="scss" scoped></style>
